<template>
  <div class="container">
    <!-- Vue2.0的ref方式 -->
    <!-- <div ref="box">我是Box</div> -->
    <!-- 获取的方式是：this.$refs.box -->
    <!-- <ul>
      <li v-for="i in 4"
          :key="i"
          ref="li">{{i}}</li> -->
    <!-- 获取的方式是： this.$refs.li , 获取所有的遍历的元素-->
    <!-- </ul> -->

    <!-- Vue3.0 ref -->
    <!-- 单个元素 -->
    <div ref="dom">我是dom</div>

    <!-- 被遍历的元素 -->
    <ul>
      <li v-for="i in 4"
          :key="i"
          :ref="setDom">第{{i}}个Li</li>
    </ul>

  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 1:先定义一个空的ref响应式数据
    // 2：在setup中返回，在元素中使用ref="dom"来引用。
    const dom = ref(null)


    onMounted(() => {
      console.log(dom.value);
    })

    // 获取遍历元素
    const domList = []
    const setDom = (el) => {
      // console.log(el);
      domList.push(el)
    }
    console.log(domList);

    return { dom, setDom }

  }
}
</script>

<style>
</style>